<script setup lang="ts">
import Player from "xgplayer";
import HlsPlugin from "xgplayer-hls";

const props = defineProps<{
  playUrl: string;
}>();

const isMounted = ref(false);
const player = ref();

const destroyedPlayerHandle = () => {
  if (player.value) {
    player.value.destroy();
    player.value = null;
  }
};

const initPlayer = (playerUrl: string) => {
  destroyedPlayerHandle();
  player.value = new Player({
    id: "xg",
    isLive: false,
    url: playerUrl, // hls 流地址
    plugins: [HlsPlugin], // 第二步
    height: "100%",
    width: "100%",
  });
};

onMounted(() => {
  isMounted.value = true;
});
watch(
  () => [props.playUrl, isMounted.value],
  () => {
    if (isMounted.value && props.playUrl) initPlayer(props.playUrl);
  }
);
</script>
<template>
  <div id="xg" w-full h-full></div>
</template>
<style scoped></style>
